<template>
	<view class="home-page">
		<view class="statusBar" :style="{
				height:`${statusBarHeight}px`
			}"></view>
		<view class="home-title" :style="{
				top:`${statusBarHeight}px`,
				height:`${topHeight}px`,
				lineHeight:`${topHeight}px`,
				paddingLeft:`${pagePadding}px`,paddingRight:`${pagePadding}px`
			}">
			e能微服务
		</view>
		<view :style="{
				height:`${statusBarHeight + topHeight}px`
			}"></view>
		<view
			:style="{padding:`20rpx ${pagePadding}px`,height: `calc(100vh-${statusBarHeight + topHeight}px + 40rpx)`}">
			<!-- 轮播 -->
			<u-swiper height="298rpx" :list="swiper_list" indicator indicatorMode="line" circular
				@click="swiperClick"></u-swiper>
			<view class="btn_list">
				<view class="btn_item" v-for="item in btnList" :key="item.text" @click="btnClick(item)">
					<view class="btn_image">
						<u-badge v-if="item.badge" class="btn_badge" max="99" :value="messageNum" />
						<image :src="item.image" />
					</view>
					<text>{{item.text}}</text>
				</view>
			</view>
			<view class="worker-card">
				<view class="worker-card_top">
					<view class="title-left">
						待办工单
					</view>
					<view class="title-right" @click="toAllWorker('1')">
						更多 >
					</view>
				</view>
				<view class="page-content" :style="{ height: 'calc('+scrollViewHeight+'px - 454rpx)' }">
					<scroll-view v-if="workerList && workerList.length>0" scroll-y
						:style="{ height: 'calc('+scrollViewHeight+'px - 474rpx)', overflow: 'auto'}"
						@scrolltolower="loadMoreFunc">
						<!-- <view class="worker-list"> -->
						<view class="worker-item" v-for="item in workerList" :key="item.workOrderId">
							<image src="/static/images/worker/ic_xiangqing.png" class="xiangqing"
								@click="toDetail(item)"></image>
							<view class="worker-item_top">
								<view class="worker-content">
									<image src="/static/images/worker/img.png" class="worker-logo"></image>
									<view class="worker-info">
										<view class="worker-title">
											{{item.consName}}
										</view>
										<view class="desc-list">
											<view class="desc u-margin-bottom-12">
												工单编号：{{item.workOrderNo}}
											</view>
											<view class="desc u-margin-bottom-12">
												工单状态：{{item.workOrderStatusName}}
											</view>
											<view class="desc">
												楼宇名称：{{item.buildName}}
											</view>
											<view class="desc">
												工单等级：{{item.workOrderLevelName}}
											</view>
										</view>
									</view>
								</view>

								<view class="worker-btn" v-if="item.stepType === '30'" @click="handleWorker('接单',item)">
									<image src="/static/images/worker/worker.png" class="worker-set"></image>
									<view class="jiedan">
										接单
									</view>
								</view>
								<view class="worker-btn" v-if="item.stepType === '80'" @click="handleWorker('回单',item)">
									<image src="/static/images/worker/receipt.png" class="worker-set"></image>
									<view class="jiedan">
										回单
									</view>
								</view>
								<view class="worker-btn" v-if="item.stepType === '40'"
									@click="handleWorker('到达现场',item)">
									<image src="/static/images/worker/reach.png" class="worker-set"></image>
									<view class="jiedan">
										到达现场
									</view>
								</view>
								<view class="worker-btn" v-if="item.stepType === '70'"
									@click="handleWorker('巡查确认',item)">
									<image src="/static/images/worker/confirm.png" class="worker-set"></image>
									<view class="jiedan">
										巡查确认
									</view>
								</view>

								<view class="worker-btn" v-if="item.stepType === '50'"
									@click="handleWorker('异常确认',item)">
									<image src="/static/images/worker/error.png" class="worker-set"></image>
									<view class="jiedan">
										异常确认
									</view>
								</view>
								<view class="worker-btn" v-if="item.stepType === '65'"
									@click="handleWorker('运维确认',item)">
									<image src="/static/images/worker/operation.png" class="worker-set"></image>
									<view class="jiedan">
										运维确认
									</view>
								</view>
							</view>
							<!-- 根据朱经理要求召测功能先隐藏 -->
							<!-- <view class="worker-item_bottom">
									<view class="bottom-item" @click="handleTest">
										<image src="/static/images/worker/zhaoce.png"></image>
										召测
									</view>
									<view class="bottom-line"></view>
									<view class="bottom-item" @click="handleWorker('回单',item)">
										<image src="/static/images/worker/receipt.png"></image>
										回单
									</view>
								</view> -->
						</view>
						<!-- </view> -->
						<u-loadmore :status="loadStatus" :load-text="{
								  loading: '加载中...',
								  nomore: '没有更多了',
								  loadmore: '上拉加载更多'
								}" />
					</scroll-view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		getCurrentInstance,
		nextTick,
		ref
	} from "vue";
	const {
		proxy
	} = getCurrentInstance();
	const statusBarHeight = ref(0); // 状态栏高度
	const topHeight = ref(0); // 胶囊高度
	const pagePadding = ref(0);
	const scrollViewHeight = ref(0)
	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight; // 获取状态栏高度

		const res = uni.getMenuButtonBoundingClientRect();
		pagePadding.value = systemInfo.screenWidth - res.right
		topHeight.value = res.height + (res.top - statusBarHeight.value) * 2

		scrollViewHeight.value = systemInfo.windowHeight - (statusBarHeight.value + topHeight.value + 90)
		// 

	});
	const swiper_list = ref([
		'/static/images/home/banner.png',
		'/static/images/home/banner.png',
		'/static/images/home/banner.png'
	])
	const swiperClick = (index) => {
		console.log(index)
	}

	const btnList = ref([{
		image: '/static/images/home/icon_1.png',
		text: '未读信息',
		badge: true,
		type: 'message',
	}, {
		image: '/static/images/home/icon_2.png',
		text: '待处理',
		type: 'worker',
		tag: '1'
	}, {
		image: '/static/images/home/icon_3.png',
		text: '处理中',
		type: 'worker',
		tag: '2'
	}, {
		image: '/static/images/home/icon_4.png',
		text: '已处理',
		type: 'worker',
		tag: '3'
	}
	, {
		image: '/static/images/home/icon_5.png',
		text: '已终止',
		type: 'worker',
		tag: '4'
	},
	])
	const messageNum = ref(0)
	// 待办工单
	const workerList = ref([])
	const loadStatus = ref('loadmore') // 加载状态（loadmore/loading/nomore）
	const pageSize = ref(20)
	const pageNum = ref(1)
	const total = ref(0)
	const loadMoreFunc = () => {
		if (loadStatus.value !== 'loadmore') return;
		pageNum.value++;
		getWorkerList();
	}
	const handleRefresh = async () => {
		pageNum.value = 1;
		getWorkerList()
	}

	onLoad(() => {
		getMessageNum()
		handleRefresh()
	})
	const getWorkerList = async () => {
		if (loadStatus.value === 'nomore') return;

		loadStatus.value = 'loading';
		const res = await proxy.$http.POST('/aom/wechat/queryCommon', {
			obj: {
				data: {
					"mgtOrgCode": "",
					"workOrderLevel": "",
					"workOrderNo": "",
					"workOrderType": "",
					"workOrderStatus": "1",
				},
				"pageNum": pageNum.value,
				"pageSize": pageSize.value,
			},
			url: "queryPageWorkOrder"
		})
		if (res.code != '00000') {
			nextTick(() => {
				loadStatus.value = 'loadmore';
			})
			return;
		}
		total.value = res.total;
		if (pageNum.value == 1) {
			workerList.value = res.data.list;
		} else {
			workerList.value = [...workerList.value, ...res.data.list]
		}
		// 判断是否还有下一页
		nextTick(() => {
			if (workerList.value.length >= total.value) {
				loadStatus.value = 'nomore';
			} else {
				loadStatus.value = 'loadmore';
			}
		})
	};
	// getWorkerList()
	const toKnowledgeDetail = () => {
		uni.navigateTo({
			url: `/pages/knowledge`
		});
	}

	const toDetail = (item) => {
		uni.navigateTo({
			url: `/pages/worker/detail?workOrderId=${item.workOrderId}&workOrderType=${item.workOrderType}`
		});
	}
	const handleWorker = (pageName, item) => {
		uni.navigateTo({
			url: `/pages/worker/handle?pageName=${pageName}&workOrderNo=${item.workOrderNo}&stepType=${item.stepType}`
		});
	}
	const handleTest = () => {
		uni.navigateTo({
			url: `/pages/worker/testing`
		});
	}

	const toAllWorker = (type) => {
		uni.setStorageSync('workerPageParams', {
			workOrderStatus: type,
		});
		uni.switchTab({
			url: `/pages/worker/index`
		});
	}
	const btnClick = (item) => {
		if (item.type === "worker") {
			toAllWorker(item.tag)
		} else if (item.type === "message") {
			uni.setStorageSync('messagereadStatus', {
				messagereadStatus: '2',
			});
			uni.switchTab({
				url: `/pages/message/index`
			});
		}
	}

	const getMessageNum = () => {
		proxy.$http.POST('/aom/wechat/queryCommon', {
			obj: {
				data: {
					readStatus: "unread",
				},
				pageNum: 1,
				pageSize: 9999
			},
			url: 'queryPageMessageInfo'
		}).then((res) => {
			messageNum.value = res.data.total
		})
	}
</script>

<style scoped lang="scss">
	.page-content {
		overflow: hidden;
		padding: 10rpx;
	}

	.home-page {
		background: #F1F1F1;
		height: 100vh;
	}

	.home-title {
		position: fixed;
		z-index: 999;
		width: 100%;
		font-size: 38rpx;
		font-weight: 700;
		background: #ffffff;
	}

	.btn_list {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 13px;
	}

	.btn_item {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.btn_image {
		position: relative;

		.btn_badge {
			position: absolute;
			top: -6px;
			right: -6px;
			z-index: 10;
		}

		image {
			height: 76rpx;
			width: 76rpx;
		}
	}

	.knowledge {
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;

		&-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.title-left {
				font-size: 32rpx;
				color: rgb(50, 50, 50);
				font-weight: bold;
			}

			.title-right {
				font-size: 28rpx;
				color: rgb(1, 112, 106);
			}
		}

		&-item {
			padding: 20rpx 0;
			display: flex;

			image {
				width: 512rpx;
				height: 174rpx;
				margin-right: 20rpx;
			}

			&_info {}
		}
	}

	.info-title {
		font-size: 40rpx;
		color: #333333;
		margin-bottom: 10rpx;
	}

	.info-desc {
		font-size: 30rpx;
		color: #7F7F7F;
		margin-bottom: 10rpx;
	}

	.info-tags {
		display: flex;
	}

	.info-tag {
		display: flex;
		align-items: center;
		width: 50%;
		font-size: 24rpx;
		color: #7F7F7F;
	}


	.worker-card {
		padding: 20rpx 0;

		&_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.title-left {
				font-size: 32rpx;
				padding: 0 5px;
			}

			.title-right {
				font-size: 28rpx;
				color: $uni-color-project;
			}
		}
	}
</style>